layui upload判断图片大小后处理压缩图片后再上传

2023-04-09 00:19| 来源: 网络整理| 查看: 265

开始先很明确地说明，IE9及以下的IE浏览器或者旧版Edge请使用其它现成的JS上传插件代替layui的上传插件。

思路是在上传组件的上传前的回调中进行操作。

在回调中使用官方文档所说的重新上传方法，看了layui.upload.js的源码后发现，只要传入的file是文件数据就可以替换选中要上传的文件数据。那么剩下就是对图片进行压缩，我这里就不进行复杂的图片压缩计算，只进行压缩宽高80%的操作。直接上代码

首页这是首页上传 layui.use(['upload'], function () { var $ = layui.jquery, upload = layui.upload; var IsImgDeal = false;//标记图片是否处理了 var uploadIns = upload.render({ elem: '#span_upload' , url: '/upload/Pic' , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。 //可能处理方法写在choose会好些，就留给大家测试看哪个合适了 if (IsImgDeal) { return;//图片处理过就直接上传 } console.log(1); var files = obj.pushFile(); var file_tar = null,index_tar = null; for (var k in files) { index_tar = k; file_tar = files[k]; break; } //进行图片压缩，直接百度压缩方法 let reader = new FileReader(); var filename = file_tar.name; reader.readAsDataURL(file_tar); reader.onload = function () { let content = this.result; //图片的src，base64格式 let img = new Image(); img.src = content; img.onload = function () { //图片加载完毕 let canvas = document.createElement("canvas"); let ctx = canvas.getContext('2d'); let width = Math.ceil(img.width*0.8); let height = Math.ceil(img.height*0.8); canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0, width, height);//压缩图片尺寸 let dataURL = canvas.toDataURL("image/jpeg");//如果是需要质量压缩就补充参数 //将base64数据转化为文件对象 var arr = dataURL.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } IsImgDeal = true;//设置标记 //如果有时差问题，后面setTimeout延时再执行，让原来的上传终止 obj.upload(index_tar, new File([new Blob([u8arr], { type: mime })], filename));//单独上传 //uploadIns.upload();//重新启动全部文件上传 } }; layer.load(); //上传loading //停止原本的上传，如果多个文件，需要在读取完毕后将files里面的文件队列全删除。 return delete files[index_tar]; } , done: function (res, index, upload) { layer.closeAll('loading'); //关闭loading //这里根据后台相应的返回值进行不同的逻辑处理 if (res["status"] == 1) { $("#img_res").attr("src", res["data"]); } else { console.log(res); } IsImgDeal = false; } , error: function (index, upload) { layer.closeAll('loading'); //关闭loading IsImgDeal = false; } }); });

原图片大小。

压缩上传后的大小。

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章